<style>
    #contact{
        margin-top: 10px;
    }
    .card-block table thead tr:hover{
        background-color: #74cbea;
    }
</style>
<div id="contact" class="container animated fadeIn">
<div class="col-sm-2">
    <div class="card">
        <div class="card-header">
            <i class="icon-phone"></i>
            <strong>ئالاقىلىشڭ</strong>
        </div>
        <div class="card-block">
            <table id="contact-list-table" class="table table-striped">
                <thead>
                <tr>
                      <th id="contact-info" onclick="show-info()">بىز ھەققىدە</th>
                </tr>
                <tr>
                      <th id="contact-cooperation" onclick="show-cooperation()">ھەمكارلىشىڭ</th>
                </tr>
                <tr>
                      <th id="contact-tel" onclick="show-tel()">ئالاقىلىشىڭ</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="card-footer">
        </div>
    </div>
</div>
<div class="col-sm-8">
    <div class="card" id="card-info">
        <div class="card-header">
            <i class="icon-info"></i>
            <strong>بىز ھەققىدە</strong>
            <div class="card-actions">
                <a href="#" class="btn-close"><i class="icon-close"></i></a>
            </div>
        </div>
        <div class="card-block">
            <div style="">
            <img src="img/logo_big.jpg" alt="تۇلپار" style="width: 400px;height: 400px;">
            </div>
        </div>
        <div class="card-footer">
    </div>
</div>
</div>
<div class="col-sm-8">
        <div class="card" id="card-cooperation" style="display: none;">
            <div class="card-header">
                <i class="icon-globe"></i>
                <strong>ھەمكارلىشىڭ</strong>
                <div class="card-actions">
                    <a href="#" class="btn-close"><i class="icon-close"></i></a>
                </div>
            </div>
            <div class="card-block">
                <table id="contact-list-table" class="table table-striped">
                    <thead>
                    <tr>
                        <th>بىز ھەققىدە</th>
                    </tr>
                    <tr>
                        <th>ھەمكارلىشىڭ</th>
                    </tr>
                    <tr>
                        <th>ئالاقىلىشىڭ</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="card-footer">
            </div>
        </div>
    </div>
<div class="col-sm-8">
        <div class="card" id="card-tel" style="display: none;">
            <div class="card-header">
                <i class="icon-phone"></i>
                <strong>ئالاقىلىشڭ</strong>
                <div class="card-actions">
                    <a href="#" class="btn-close"><i class="icon-close"></i></a>
                </div>
            </div>
            <div class="card-block">
                <table id="contact-list-table" class="table table-striped">
                    <thead>
                    <tr>
                        <th>بىز ھەققىدە</th>
                    </tr>
                    <tr>
                        <th>ھەمكارلىشىڭ</th>
                    </tr>
                    <tr>
                        <th>ئالاقىلىشىڭ</th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="card-footer">
            </div>
        </div>
    </div>
</div>
<script>
$("#contact-info").click(function () {
    $("#card-cooperation").hide();
    $("#card-tel").hide();
    $("#card-info").show();
});
$("#contact-cooperation").click(function () {
    $("#card-info").hide();
    $("#card-tel").hide();
    $("#card-cooperation").show();
});
$("#contact-tel").click(function () {
    $("#card-info").hide();
    $("#card-cooperation").hide();
    $("#card-tel").show();
});
</script>